// 绑定按钮事件
document.getElementById('draw').addEventListener('click', drawBounds);

var district = null;
var polygon;
var currentTextMarker = null;

var levelColorMap = {
    1: '#ff80a2', // 浅粉红色 - 等级1
    2: '#d500f9', // 紫色 - 等级2
    3: '#8bc34a', // 浅绿色 - 等级3
    4: '#ffeb3b'  // 黄色 - 等级4
};

// 初始化 districtLevelMap 为空对象
var districtLevelMap = {};

// 加载 districtLevels.json 文件
fetch('districtLevels.json')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then(data => {
        data.districts.forEach(item => {
            districtLevelMap[item.adcode] = item.eco_level;
        });

        // console.log('District districtLevelMap loaded:', districtLevelMap);

        // // 示例：根据 adcode 查询等级
        // var adcode = "110101";
        // var level = districtLevelMap[adcode];
        // console.log(`The level of adcode ${adcode} is ${level}`);
        //
        // // 示例：根据 adcode 查询名称
        // var nameItem = data.find(item => item.adcode === adcode);
        // if (nameItem) {
        //     var name = nameItem.name;
        //     console.log(`The name of adcode ${adcode} is ${name}`);
        // } else {
        //     console.log(`No name found for adcode ${adcode}`);
        // }
    })
    .catch(error => {
        console.error('Error loading district data:', error);
    });


// 动态生成图例
function createLegend() {
    var legendContainer = document.getElementById('legend');
    legendContainer.innerHTML = ''; // 清空图例容器

    for (var level in levelColorMap) {
        var item = document.createElement('div');
        item.className = 'legend-item';

        var colorBox = document.createElement('div');
        colorBox.className = 'legend-color';
        colorBox.style.backgroundColor = levelColorMap[level];

        var label = document.createElement('span');
        label.textContent = `生态等级 ${level}`;

        item.appendChild(colorBox);
        item.appendChild(label);
        legendContainer.appendChild(item);
    }
}

// 调用函数生成图例
createLegend();


function drawBounds() {
    //加载行政区划插件
    if (!district) {
        //实例化DistrictSearch
        var opts = {
            subdistrict: 2,   //获取边界不需要返回下级行政区 1：返回下一级行政区信息。
            extensions: 'all',  //返回行政区边界坐标组等具体信息
            level: 'district'  //查询行政级别为 市
        };
        district = new AMap.DistrictSearch(opts);
    }
    //行政区查询
    district.setLevel(document.getElementById('level').value)
    console.log("行政区查询-level:", document.getElementById('level').value)
    var keyword = document.getElementById('district').value;
    console.log("行政区查询-keyword:", keyword)
    if (keyword === '') {
        log.warn('名称不能为空');
        return
    }
    // //根据行政区名称查询行政区信息
    searchDistrict(keyword)
}

function searchDistrict(keyword) {
    console.log("searchDistrict-keyword:", keyword)
    district.search(keyword, function (status, result) {
        //清除上次查询结果的polygon
        if (polygon) {
            map.remove(polygon);
            polygon = null;
        }
        if (currentTextMarker) {
            map.remove(currentTextMarker);
            currentTextMarker = null;
        }
        //检查查询结果是否有效
        if (!result || !result.districtList || !result.districtList[0]) {
            log.warn('请正确填写名称或更新其他名称');
            return;
        }
        //打印查询结果
        console.log("行政区查询-result:", result);

        var bounds = result.districtList[0].boundaries;
        console.log("bounds:", bounds);

        // 调用新函数发送 bounds 到服务器
        // sendBoundsToServer(keyword, bounds);

        // 获取等级，如果没有匹配的区域，则使用默认等级
        var adcode = result.districtList[0].adcode;
        var level = districtLevelMap[adcode] || 1; // 默认等级为1
        // 获取填充颜色
        var fillColor = levelColorMap[level];

        // 如果查询到边界信息，则生成 polygon 并添加文本标记
        if (bounds) {
            addPolygonAndTextMarker(bounds, fillColor, map, result);
        }

        map.setFitView(polygon); // 视口自适应
    });
}

function calculatePolygonCenter(path) {
    if (path.length === 0) {
        console.error('Path is empty, cannot calculate center.');
        return [0, 0]; // 返回一个默认值，防止 NaN
    }

    var x = 0;
    var y = 0;
    var len = path.length;
    for (var i = 0; i < len; i++) {
        y += path[i][0];
        var result = parseCoordinateString(y)

    }

    return result;
}

function parseCoordinateString(coordinateString) {
    // 将字符串解析为数组
    var parts = coordinateString.split(',');
    return [parseFloat(parts[0]), parseFloat(parts[1])];
}


// 定义 sendBoundsToServer 函数 发送 bounds 到服务器
function sendBoundsToServer(keyword, bounds) {
    // 构造要发送的数据对象
    var dataToSend = {
        [keyword]: bounds
    };

    // 发送 bounds 到服务器
    fetch('http://localhost:3000/save-bounds', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataToSend)
    })
        .then(response => response.text())
        .then(data => {
            console.log('Success:', data);
        })
        .catch((error) => {
            console.error('Error:', error);
        });
}


// 定义 addPolygonAndTextMarker 函数
function addPolygonAndTextMarker(bounds, fillColor, map, result) {
    // 生成行政区划 polygon
    for (var i = 0; i < bounds.length; i += 1) {
        bounds[i] = [bounds[i]];
    }
    // 创建并添加 polygon 到地图
    polygon = new AMap.Polygon({
        strokeWeight: 1,      // 设置多边形边框的宽度为 1 像素
        path: bounds,         // 设置多边形的路径（边界坐标数组）
        fillOpacity: 0.8,     // 设置多边形填充颜色的透明度为 0.8
        fillColor: fillColor, // 设置多边形的填充颜色为浅粉红色
        strokeColor: '#0091ea' // 设置多边形边框的颜色为蓝色
    });

    console.log("边界 polygon", polygon);
    map.add(polygon);

    // 获取多边形的中心点
    var center =  result.districtList[0].center
    console.log("中心点", center);

    // 创建文本标记
    currentTextMarker = new AMap.Text({
        position: center,       // 文本标记的位置为中心点
        text: result.districtList[0].name,        // 文本内容
        offset: new AMap.Pixel(0, 0), // 文本标记的偏移量
        style: {
            fontSize: '22px',   // 字体大小
            color: '#e80a0a',      // 字体颜色
            backgroundColor: 'rgba(255, 255, 255, 0.8)', // 背景颜色
            padding: '5px',     // 内边距
            border: '1px solid #ccc' // 边框样式
        }
    });

    // 将文本标记添加到地图
    map.add(currentTextMarker);
}